// 此router目录就是存放所定义的路由规则的目录，index.js就是定义规则的地方
// Vue.use ==>  Vue给开发提供的一个插件的加载方法
import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入视图组件  --> 通过路由匹配成功后渲染的组件称之为视图组件
import home from '@/views/home'
import about from '@/views/about'
import notfound from '@/views/404'

import adminMain from '@/views/admin/main'
import adminUser from '@/views/admin/user'
import adminArticle from '@/views/admin/article'

import newsIndex from '@/views/news/index.vue'
import newsDetail from '@/views/news/detail.vue'

// 通过插件的机制给加载到Vue中
Vue.use(VueRouter)

// 路由规则表 -- 精确匹配
const routes = [
  {
    path: '/',
    // 重定向
    redirect: '/home'
  },
  {
    // 路由匹配的路径
    path: '/home',
    // 路由匹配成功后要渲染的组件
    component: home
  },
  {
    path: '/about',
    component: about
  },
  {
    path: '/admin',
    component: adminMain,
    // 子路由
    children: [
      {
        // path:'/admin/user'
        path: 'user',
        component: adminUser
      },
      {
        path: 'article',
        component: adminArticle
      }
    ]
  },
  {
    path: '/news',
    component: newsIndex
  },
  {
    // 动态路由参数，先定义后使用
    // path: '/detail/:id',
    // 可选路由参数  -- 地址栏中显示
    path: '/detail/:id?',
    // 命名路由  -- 用于导航所用，它是程序所用，不会在地址栏中显示
    name: 'detail',
    component: newsDetail,
    // 回调函数，返回一个对象，进行隐式传值
    // props: router => ({ name: '李四' })
    // 把动态路由参数，以props的方式在组件中获取
    props: true
  },
  // 404处理,通配符 * 所有
  {
    // 上面的规则一个都没有匹配成功，则使用我 一定写在最后
    path: '*',
    component: notfound
  }
]

// 定义路由规则的匹配程序
const router = new VueRouter({
  // 路由模式，web浏览器只支持 history/hash
  mode: 'history',
  // 路由规则表
  routes
})

export default router
